<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            width: 400px;
            height: 400px;
        }
    </style>
</head>
<body>
    <!-- <img id="lazy" src="../assets/img/loading.gif" imgsrc="https://img0.baidu.com/it/u=202361835,3806649081&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800" alt="" srcset=""> -->
    <!-- 如果图片已经被加载过了，后续该图片读取不会再发送请求，只会从浏览器缓存中读取 -->
    <!-- <img src="../assets/img/loading.gif" >
    <img src="../assets/img/loading.gif" >
    <img src="../assets/img/loading.gif" > -->
    <!-- <script>
        let imgDom = document.querySelector("#lazy");
        let imgsrc = imgDom.getAttribute("imgsrc");
        let tempImg = document.createElement("img");
        // js 中创建的img标签即便没有在浏览器中被现实，一旦获取了src属性必然会向服务器加载图片资源
        //          该img标签因为不在页面中，说要加载的图片也会显示在页面中
        tempImg.src = imgsrc;
        tempImg.onload = function(){
            // 图片加载完成后执行回调函数
            imgDom.src = imgsrc;
        } -->
    </script>
    <hr>
    <div id="app">
        <img v-lazy="imgSrc" src="../assets/img/loading.gif" alt="" srcset="" style="object-fit:cover;">
        <img v-lazy="imgSrc1" src="../assets/img/loading.gif" alt="" srcset="" style="object-fit:cover;">

        
    </div>
    <script type="module">
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        createApp({
            data() {
                return {
                    imgSrc:"https://img0.baidu.com/it/u=202361835,3806649081&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800",
                    imgSrc1:"https://img1.baidu.com/it/u=483345221,811341810&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"
                }
            },
            directives:{
                lazy(el,binding){
                    let cssText = el.style.cssText; // 记录原始的行内样式
                    el.style.objectFit = "scale-down";
                    let imgsrc = binding.value;
                    let tempImg = document.createElement("img");
                    // js 中创建的img标签即便没有在浏览器中被现实，一旦获取了src属性必然会向服务器加载图片资源
                    //          该img标签因为不在页面中，说要加载的图片也会显示在页面中
                    tempImg.src = imgsrc;
                    tempImg.onload = function(){
                        // 图片加载完成后执行回调函数
                        el.src = imgsrc;
                        el.style.cssText = cssText; // 覆盖回原始的行内样式
                    }
                }
            }
        }).mount("#app")
    </script>
</body>
</html>